<template>
	<uni-popup ref="popupRef" type="top" style="z-index: 999;" :animation="false" mask-background-color="rgb(244, 245, 247)">
		<view class="enter-type" :style="{width:typeW,height:typeH}">
			<view class="status-bar"> </view>
			<view class="top-nav">
				<image @tap="close" src="/static/icon/navbar/left.png" class="left" />
				<text> 选择主营类目 </text>
				<view class="right"> </view>
			</view>
			<view class="content">
				<view class="search">
					<image src="/static/icon/mine/search.png" class="s-img"/>
					<input v-model="searchVal" type="text" placeholder="您可以搜索想要的商品和信息服务" @confirm="search"/>
				</view>
				<view class="category" v-if="categoryList.length">
					<view 
						class="item" 
						:class="category.id == item.id ? 'a-item' :''"
						@tap="tapItem(item)" 
						v-for="item in categoryList" 
						:key="item"
					> 
						{{ item.title }} 
					</view>
				</view>
				<Empty txt="这里空荡荡的~" v-else/>
				<view class="btn" @tap="submit"> 确定 </view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import Empty from '@/components/Empty.vue'
	import { GetMainCategoryApi } from '@/service/index.js'
	const { safeArea } = uni.getSystemInfoSync()
	const emit = defineEmits(['selectCategory'])
	const popupRef = ref()
	const category = ref() // 选中的分类id
	const categoryList = ref([])
	const searchVal = ref('')
	const getCategory = () => {
		let params = {
			goods_type: 2,
			search: searchVal.value
		}
		GetMainCategoryApi(params).then(res => {
			category.value = res.data[0]
			categoryList.value = res.data
			searchVal.value = ''
		})
	}
	const search = () => {
		getCategory()
	}
	const typeW = computed(() => safeArea.width + 'px' )
	const typeH = computed(() => safeArea.height + 'px' )
	const open = () => {
		getCategory()
		popupRef.value.open()
	}
	const close = () => {
		popupRef.value.close()
	}
	// 点击选择项
	const tapItem = (id) => {
		category.value = id
	}
	// 确定
	const submit = () => {
		emit('selectCategory', category.value)
		close()
	}
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.enter-type {
		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		// transform: translateY(-44px);
		.top-nav {
			height: 44px;
			display: flex;
			color: #333333;
			font-size: 16px;
			padding: 0 12px;
			font-weight: 500;
			justify-content: space-between;
			align-items: center;
			.left, .right {
				width: 16px;
				height: 16px;
			}
		}
		.content {
			width: 100%;
			padding: 10px 12px;
			box-sizing: border-box;
			.search {
				height: 32px;
				line-height: 32px;
				padding: 0 10px;
				border-radius: 32px;
				background-color: #fff;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				.s-img {
					width: 14px;
					height: 14px;
				}
				input {
					flex: 1;
					color: #888888;
					font-size: 14px;
					font-weight: 400;
					padding: 0 10px;
				}
			}
			.category {
				display: grid;
				gap: 10px;
				grid-template-columns: repeat(3, 1fr);
				margin-top: 10px;
				box-sizing: border-box;
				.item {
					height: 32px;
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 32px;
					text-align: center;
					background: #FFFFFF;
					border-radius: 151px;
					&.a-item {
						color: #FF3B1E;
						border: 1px solid #FF3B1E;
						box-sizing: border-box;
					}
				}
			}
			.btn {
				position: fixed;
				left: 12px;
				right: 12px;
				bottom: 12px;
				height: 50px;
				color: #FFFFFF;
				font-size: 17px;
				font-weight: 500;
				line-height: 50px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px;
			}
		}
	}
</style>